<!-- 我要预约 -->
<template>
	<view class="immediately_back" v-if="data != ''">
		<view class="immediately_box">
			<view class="w95 f b ">
				<view class="immediately_box_img">
					<image style="" class="br5" :src="data.img" mode="widthFix"></image>
				</view>
				<view class="f d p_t_25 p_l_15 wd60">
					<view class="fs28 bold ellipsis" :class="{'sijiao': data.type==2}">{{data.name}}</view>
					<view class="mt5">
						<text class="fs20 hui ellipsis-2">{{data.title}}</text>
					</view>
					<view class=" " v-if="data.type == 2 && data.dxc == 2">
						<view class="fs26 mt5 ">集体卡：{{data.jtk_xk_num}}课时</view>
						<view class="fs26 mt2 cheng">私教卡：{{data.xk_num}}课时</view>
					</view>
					<view class="mt10" v-else>
						<view class="fs26  ">价格：{{data.xk_num}}课时</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="w90">
			<text class="fs20 hui">提示：最多可预约1周的课程，预约后不可取消</text>
		</view> -->
		<view class="w90" v-if="userInfo.is_vip == 1">
			<view class="immediately_yuyue">
				<view class="w90 p_t_31 f b c " @click="show=!show">
					<view class="wd60 f ">
						<view class="m_t_5">
							<image style="width: 30rpx;height: 30rpx;" src="../../../static/index/002.png" mode="">
							</image>
						</view>
						<view class="ml10">
							<text class="fs28 hui">预约日期</text>
						</view>
					</view>
					<view class="wd40 f flex-end">
						<view class="mr10">
							<text class="hui fs24">{{day?day:'请选择日期'}}</text>
						</view>
						<view>
							<image style="width: 24rpx;height: 24rpx;" src="../../../static/index/005.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="immediately_yuyue">
				<view class="w90 p_t_31 f b c" @click="xuanzetime">
					<view class="wd40 f ">
						<view class="m_t_5">
							<image style="width: 30rpx;height: 30rpx;" src="../../../static/index/002.png" mode="">
							</image>
						</view>
						<view class="ml10">
							<text class="fs28 hui">课程时间段</text>
						</view>
					</view>
					<view class="wd60 f flex-end echarts">
						<view class="mr10">
							<text class="hui fs24">{{timetitle?timetitle:'请选择时间段'}}</text>
						</view>
						<view>
							<image style="width: 24rpx;height: 24rpx;" src="../../../static/index/005.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="immediately_yuyue" v-if="data.type == 2" @click="Choose(data.coachList)">
				<view class="w90 p_t_31 f b c">
					<view class="wd60 f ">
						<view class="m_t_5">
							<image style="width: 30rpx;height: 30rpx;" src="../../../static/index/003.png" mode="">
							</image>
						</view>
						<view class="ml10">
							<text class="fs28 hui">教练选择</text>
						</view>
					</view>
					<view class="wd40 f flex-end">
						<view class="mr10">
							<text class="fs24 hui">{{jiaolian?jiaolian:'请选择教练'}}</text>
						</view>
						<view>
							<image style="width: 24rpx;height: 24rpx;" src="../../../static/index/005.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="immediately_yuyue" @click="goka">
				<view class="w90 p_t_31 f b c">
					<view class="wd60 f ">
						<view class="m_t_5">
							<image style="width: 30rpx;height: 30rpx;" src="../../../static/index/004.png" mode="">
							</image>
						</view>
						<view class="ml10">
							<text class="fs28 hui">{{kaName}}</text>
						</view>
					</view>
					<view class="wd40 f flex-end">
						<view  class="mr10">
							<text class="fs24">{{course_num?course_num:''}}</text>
						</view>
						<view v-if="cardArrLength>0">
							<image style="width: 24rpx;height: 24rpx;" src="../../../static/index/005.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="dis-flex flex-center mt40">
				<view @click="subscribeMessage(1)" class="wd70 center c-fff "
					style="border-radius: 200rpx;height: 80rpx;line-height: 80rpx;background-color: #1f73f2;">
					立即预约
				</view>
			</view>

		</view>

		<view v-else class="w90">
			<view class="immediately_yuyue">
				<u-field v-model="name" :clearable="false" :border-bottom="false" label="姓名:" placeholder="请填写姓名">
				</u-field>
			</view>
			<view class="immediately_yuyue">
				<u-field v-model="age" :border-bottom="false" :clearable="false" label="年龄:" placeholder="请填写年龄">
				</u-field>
			</view>
			<view class="immediately_yuyue">
				<u-field v-model="sex" @click="showAction" :border-bottom="false" :disabled="true" label="性别"
					placeholder="请选择性别" right-icon="arrow-down-fill"></u-field>
			</view>
			<view class="immediately_yuyue">
				<u-field v-model="userInfo.phone" :clearable="false" :disabled="true" :border-bottom="false"
					label="手机号:" type="number" :field-style="yangshi" placeholder="请填写手机号"></u-field>
			</view>
			<view class="dis-flex flex-center mt40">
				<view @click="subscribeMessage(0)" class="wd70 center c-fff "
					style="border-radius: 200rpx;height: 80rpx;line-height: 80rpx;background-color: #1f73f2;">
					立即预约
				</view>
			</view>
		</view>
		<view class="">
			<u-calendar v-model="show" toolTip="请选择预约日期" :change-year="false" :min-date="min_time" :max-date="max_time"
				mode="date" @change="change"></u-calendar>
			<u-select v-model="time_show" :list="list" @confirm="confirm"></u-select>
			<u-select v-model="ka_show" :list="ka_list" @confirm="kaxuanze"></u-select>
		</view>
		<u-action-sheet @click="clickItem" :list="sexList" v-model="sex_show"></u-action-sheet>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				yangshi: {
					color: '#999'
				},
				show: false,
				time_show: false,
				ka_show:false,
				timetitle: '',
				day: '',
				jiaolian: '',
				showMutibleDate: false,
				data: [],
				list: [],
				min_time: "",
				max_time: "3000-01-01",
				userInfo: [],
				name: '',
				sex: '',
				age: '',
				sex_show: false,
				sexList: [{
						text: '男',
					},
					{
						text: '女'
					}
				],
				phone: '',
				jiaolianlist: [],
				timestr_id: '',
				cardArrLength: 0, //有几张卡
				kaName: "", //卡的名称
				ka_id:'',
				course_num: 0, //剩余课时
				ka_list: [], //卡的列表数据
			}
		},
		onLoad(e) {
			this.init(e.id)
			var date1 = new Date();
			//今天时间
			this.min_time = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()

		},
		onShow() {
			var that = this
			uni.$on('updateData', function(data) {
				that.jiaolian = data.name
			})
		},
		methods: {
			init(id) {
				var that = this
				var json = {
					id: id
				}
				that.$http.post(that.$config.UrlPostcourseDetail, json).then((res) => {
					if (res.status == 1) {
						that.data = res.data
						if (that.data.cardArr != '') {
							that.cardArrLength = that.data.cardArr.length
							if (that.data.cardArr.length > 1) {
								var list = that.data.cardArr
								var data = []
								for (let i = 0; i < list.length; i++) {
									let arr = new Object()
									arr.value = list[i]['id']
									if (list[i]['type'] == 1) {
										var str = '大池集体卡'
									}
									if (list[i]['type'] == 2) {
										var str = '大池私教卡'
									}
									if (list[i]['type'] == 3) {
										var str = '小池会员卡'
									}
									arr.label = str
									data.push(arr)
								}
								that.ka_list = data
								that.kaName = '会员卡选择'
							} else {
								if (that.data.cardArr[0].type == 1) {
									var str = '大池集体卡'
								}
								if (that.data.cardArr[0].type == 2) {
									var str = '大池私教卡'
								}
								if (that.data.cardArr[0].type == 3) {
									var str = '小池会员卡'
								}
								that.kaName = str
								that.ka_id = that.data.cardArr[0].id
								that.course_num = that.data.cardArr[0].course_num
							}
						} else {
							that.kaName = '该课程没有会员卡！'
						}

					}
				})
				//实时获取用户信息
				that.$http.post(that.$config.UrlPostuserInfo, {}).then((res) => {
					if (res.status == 1) {
						that.userInfo = res.data;
						uni.setStorageSync('userInfo', res.data);

					}
				})

			},
			//选择卡
			goka(){
				if(this.cardArrLength > 1){
					this.ka_show = !this.ka_show
				}
			},
			showAction() {
				this.sex_show = true;
			},
			clickItem(index) {
				this.sex = this.sexList[index].text;
			},
			//立即预约
			yes_vip() {
				var that = this
				if (that.kaName == '该课程没有会员卡！') {
					this.$api.toast('该课程没有会员卡，请办理会员卡后再来预约！')
					return
				}
				if (that.course_num == 0) {
					this.$api.toast('您的有会员卡没有课时！')
					return
				}
				if (that.day == '') {
					this.$api.toast('请选择日期')
					return
				}
				if (that.timestr_id == '') {
					this.$api.toast('请选择时间段')
					return
				}
				if (that.jiaolian == '' && that.data.type == 2) {
					this.$api.toast('请选择教练')
					return
				}
				var coach_id = 0;
				var jiaolist = that.data.coachList
				for (let i = 0; i < jiaolist.length; i++) {
					if (jiaolist[i]['name'] == that.jiaolian) {
						var coach_id = jiaolist[i]['id']
					}
				}
				var json = {
					id: that.data.id,
					date: that.day,
					timestr_id: that.timestr_id,
					coach_id: coach_id,
					vip_id:this.ka_id
				}
				that.$http.post(that.$config.UrlPostyuyue, json).then((res) => {
					if (res.status == 1) {
						that.$api.openWindow('/pages/courses/make/make', 'redirectTo');
					} else {
						that.$api.toast(res.err)
					}
				})

			},
			no_vip() {
				var that = this

				if (that.name == '') {
					this.$api.toast('请输入姓名')
					return
				}
				if (that.age == '') {
					this.$api.toast('请输入年龄')
					return
				}
				if (that.sex == '') {
					this.$api.toast('请选择性别')
					return
				}

				// if(that.phone == ''){
				// 	this.$api.toast('请输入手机号')
				// 	return
				// }
				var json = {
					id: that.data.id,
					name: that.name,
					sex: that.sex,
					age: that.age,
					phone: that.userInfo.phone,
				}
				that.$http.post(that.$config.UrlPostyuyueTy, json).then((res) => {
					if (res.status == 1) {
						that.$api.openWindow('/pages/courses/make/make', 'redirectTo');
					} else {
						that.$api.toast(res.err)
					}
				})
			},
			subscribeMessage(type) {
				var that = this
				//需要订阅的消息模板，在微信公众平台手动配置获取模板ID
				let message = this.$config.pushID
				//如果总是拒绝（subscriptionsSetting，2.10.1库才支持）
				if (this.versionCompare('2.10.1')) {
					uni.getSetting({
						withSubscriptions: true, //是否同时获取用户订阅消息的订阅状态，默认不获取
						success: (res) => {
							if (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings &&
								res.subscriptionsSetting.itemSettings[message] == "reject") {
								//打开设置去设置
								this.openConfirm('检测到您没打开推送权限，是否去设置打开？')
							} else {
								uni.requestSubscribeMessage({
									tmplIds: [message],
									success: (res) => {
										if (res[message] == 'accept') {
											//用户允许
											if (type == 1) {
												that.yes_vip()
											} else {
												that.no_vip()
											}

										}
									},
									fail: (res) => {
										if (type == 1) {
											that.yes_vip()
										} else {
											that.no_vip()
										}
									},
								})
							}
						}
					})
				} else if (this.versionCompare('2.4.4')) {
					uni.requestSubscribeMessage({
						tmplIds: [message],
						success: (res) => {
							if (res[message] == 'accept') {
								//用户允许
								if (type == 1) {
									that.yes_vip()
								} else {
									that.no_vip()
								}
							}
						},
						fail: (res) => {
							if (type == 1) {
								that.yes_vip()
							} else {
								that.no_vip()
							}
						},
					})
				}
			},
			//选择时间段
			confirm(e) {
				this.timetitle = e[0].label
				this.timestr_id = e[0].value

			},
			//选择卡
			kaxuanze(e){
				this.kaName = e[0].label + "剩余课时："
				this.ka_id = e[0].value
				var list = this.data.cardArr
				for (let i = 0; i < list.length; i++) {
					if(e[0].value == list[i]['id']){
						this.course_num = list[i]['course_num']
					}
				}
			},
			change(e) {
				this.timetitle = ''
				this.timestr_id = ''
				this.day = e.result
				var that = this
				//获取时间段
				var json = {
					id: that.data.id,
					date: that.day,
				}
				that.$http.post(that.$config.UrlPostgetTimeStr, json).then((res) => {
					if (res.status == 1) {
						var list = res.data
						var data = []
						for (let i = 0; i < list.length; i++) {
							let arr = new Object()
							arr.value = list[i]['id']
							arr.label = list[i]['timestr'] + ' ' + list[i]['remark']
							data.push(arr)
						}
						that.list = data
					}
				})
			},
			Choose(item) {
				var that = this
				if (this.day == '') {
					this.$api.toast('请选择日期')
					return
				}
				if (this.timestr_id == '') {
					this.$api.toast('请选择时间段')
					return
				}
				var data = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: "../Manager/Manager?id=" + that.data.id + "&name=" + that.jiaolian + "&day=" + that.day +
						"&timestr_id=" + that.timestr_id
				})
			},
			//基础库版本比较
			versionCompare(v) {
				const version = uni.getSystemInfoSync().SDKVersion
				if (this.compareVersion(version, v) >= 0) {
					return true
				} else {
					return false
				}
			},
			compareVersion: function(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				var len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}

				for (var i = 0; i < len; i++) {
					var num1 = parseInt(v1[i])
					var num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0
			},
			xuanzetime() {
				if (this.day == '') {
					this.$api.toast('请选择日期')
					return
				}
				this.time_show = !this.time_show
			}
		}
	}
</script>

<style scoped>
	.immediately_back {
		width: 100vw;
		height: 100vh;
		background: #F6F8FC;
		overflow: hidden;
	}

	.immediately_box {
		width: 686rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.immediately_box_img {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.immediately_box_img>image {
		width: 248rpx;
		height: 156rpx;
		background: rgba(0, 0, 0, 0.00);
		border-radius: 16rpx;
	}

	.immediately_yuyue {
		width: 686rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 25rpx;
	}

	.sijiao {
		color: #FF8C23 !important;
	}
</style>
